<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="robots" content="noindex,nofollow" />
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
  <link rel="stylesheet" href="__CSS__/common.css" media="all">
  <style>
    ul.layui-tab-title li::after {
      display: none;
    }

    ul.layui-tab-title li a::after {
      left: 20px !important;
    }

    .layui-collapse,
    .layui-colla-content td {
      border: none !important;
    }

    .layui-colla-content td {
      padding-bottom: 10px !important;
    }

    .layui-colla-item {
      background-color: #F5F8FD;
      border: none !important;
      margin-bottom: 20px;
    }

    .layui-colla-item .layui-colla-title {
      font-weight: bold;
      color: #475669;
    }

    .layui-colla-content {
      background-color: #fff !important;
      border: none !important;
    }
    .new-form .layui-form-checked i, .new-form .layui-form-checked:hover i {
      color: #fff !important;
    }
  </style>
</head>

<body class="page-body">
  <h2 class="comm-title">权限组</h2>
  <div class="layui-tab">
    <ul class="layui-tab-title page-tab-title">
      <li><a href="{:url('admin/admin/adminCate')}">角色管理</a></li>
      <li class="layui-this"><a href="javascript:;">新增角色</a></li>
    </ul>
  </div>
  <div class="tpcms-body-div page-main">
    <form class="layui-form new-form" id="admin">
      <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-inline">
          <input name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text" {notempty name="$info.cate.name" } {eq name="info.cate.id" value="1"} disabled {/eq} value="{$info.cate.name}" {/notempty}>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">菜单列表</label>
        <div class="layui-input-block">
          <div id="test12" class="demo-tree-more page-tree"></div>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block" style="max-width:500px;">
          <textarea placeholder="请输入内容" class="layui-textarea" name="desc">{notempty name="$info.cate.desc"}{$info.cate.desc}{/notempty}</textarea>
        </div>
      </div>


      {notempty name="$info.cate"}
      <input type="hidden" name="id" value="{$info.cate.id}">
      {/notempty}
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn new-btn-style" lay-submit lay-filter="admin">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary default-btn">重置</button>
        </div>
      </div>

    </form>


    <script src="__PUBLIC__/layui/layui.js"></script>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <script>
      var message;
      layui.config({
        base: '__JS__/',
        version: '1.0.1'
      }).use(['app', 'message'], function () {
        var app = layui.app,
          $ = layui.jquery,
          layer = layui.layer;
        //将message设置为全局以便子页面调用
        message = layui.message;
        //主入口
        app.set({
          type: 'iframe'
        }).init();
      });
    </script>
    <script>
      
      var ids = [];
      layui.use(['layer', 'tree', 'util', 'upload','element'], function () {
        var element = layui.element;
        var upload = layui.upload;
        var tree = layui.tree
          , layer = layui.layer
          , util = layui.util
          console.log({$lists});
        //基本演示
        tree.render({
          elem: '#test12'
          , data: {$lists}
          // ,showLine:false
          , showCheckbox: true  //是否显示复选框
          , id: 'demoId1'
          ,
        });
        
        $(".test_type").click(function () {
          var checkData = tree.getChecked('demoId1');
          var json=[];
          for(var key in checkData) {
              json.push(checkData[key].id);
              for(var lx in checkData[key].children) {
                  json.push(checkData[key].children[lx].id);
              }
          }
          ids = json;
          
          
        })
        
        //执行实例
        var uploadInst = upload.render({
          elem: '#thumb' //绑定元素
          , url: "{:url('common/upload')}" //上传接口
          , done: function (res) {
            //上传完毕回调
            if (res.code == 2) {
              $('#demo1').attr('src', res.src);
              $('#upload-thumb').append('<input type="hidden" name="thumb" value="' + res.src + '">');
            } else {
              layer.msg(res.msg);
            }
          }
          , error: function () {
            //请求异常回调
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
              uploadInst.upload();
            });
          }
        });
      });
    </script>
    <script>
      layui.use(['layer', 'form'], function () {
        var layer = layui.layer,
          $ = layui.jquery,
          form = layui.form;
        $(window).on('load', function () {
          form.on('submit(admin)', function (data) {
            var datas = $.param({"ids":ids}) + "&" + $("#admin").serialize();;
            $.ajax({
              url: "{:url('admin/admin/adminCatePublish')}",
              data: datas,
              type: 'post',
              async: false,
              success: function (res) {
                if (res.code == 1) {
                  layer.alert(res.msg, function (index) {
                    location.href = res.url;
                  })
                } else {
                  layer.msg(res.msg);
                }
              }
            })
            return false;
          });
        });
      });
    </script>
  </div>
</body>

</html>